<template>
  <div>
    <div class="statics" style="display: flex">
      <Card style="flex: 1; margin-right: 20px">
        <p slot="title">
          <Icon type="ios-film-outline"></Icon>
          今日订单量:<a>{{ statistic.count }}</a>
        </p>
        <div style="display: flex; flex-wrap: wrap">
          <a style="flex: 50%">未接单：{{ statistic.noReceiveCount }}</a>
          <a style="flex: 50%"
            >{{ userInfo.companyType == 2 ? "待领取" : "已接单" }}：{{
              statistic.toReceiveCount
            }}</a
          >
          <a style="flex: 50%"
            >{{ userInfo.companyType == 2 ? "已领取" : "已结束" }}：{{
              statistic.finishCount
            }}</a
          >
          <a style="flex: 50%">已取消：{{ statistic.cancelCount }}</a>
        </div>
      </Card>
      <Card style="flex: 1; margin-right: 20px">
        <p slot="title">
          <Icon type="ios-film-outline"></Icon>
          今日销售额
        </p>
        <div>
          <H2>￥{{ statistic.dayPrice }}</H2>
        </div>
      </Card>
      <Card style="flex: 1; margin-right: 20px">
        <p slot="title">
          <Icon type="ios-film-outline"></Icon>
          销售额
        </p>
        <a slot="extra">
          <Tag color="volcano">月</Tag>
        </a>
        <div style="margin-bottom: 30px">
          <H2>￥{{ statistic.monthPrice }}</H2>
        </div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            border-top: 1px solid #e3e3e3;
            align-items: center;
          "
        >
          <h4>销售总额</h4>
          <h4>￥{{ statistic.sumPrice }}</h4>
        </div>
      </Card>
    </div>
    <div style="display: flex; flex-wrap: wrap; margin: 10px">
      <div
        v-for="(item, index) in orderlist"
        :key="item.id"
        style="width: 430px; margin: 10px"
        class="ordercard"
      >
        <Card>
          <div :id="'print' + index" style="max-width: 500px; margin: 0 auto">
            <div
              style="
                height: 40px;
                line-height: 40px;
                border-bottom: 1px solid #ddd;
                display: flex;
                margin-bottom: 10px;
                justify-content: space-between;
              "
            >
              <p slot="title">订单状态</p>
              <p slot="extra">{{ publicFun.orderStatus(item.status) }}</p>
            </div>

            <div>
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: 10px;
                "
              >
                <span v-if="userInfo.companyType == 2"
                  >取餐码：{{ item.takeFoodCode }}</span
                >
                <span>订单总额：{{ item.totalPrice }}</span>
                <span
                  >支付状态：{{ item.paid == 1 ? "已支付" : "未支付" }}</span
                >
              </div>
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: 10px;
                "
              >
                <span>手机：{{ item.umobile }}</span>
                <span>下单时间：{{ item.createTime }}</span>
              </div>
            </div>
            <div style="display: flex">
              <div style="flex: 1; margin-right: 8px">
                <Table
                  :columns="columns1"
                  :data="item.orderDetails"
                  border
                ></Table>
                <!--               
               <Table
                 v-if="userInfo.companyType==3"
                :columns="columns2"
                :data="item.orderActives"
                border
              ></Table> -->
              </div>
              <div style="flex: 1" class="righttable">
                <div>
                  <span>订单总额</span>
                  <span>￥{{ item.totalPrice }}</span>
                </div>
                <div>
                  <span>扣除个人积分 </span>
                  <span>{{ item.useIntegralType }}</span>
                </div>
                <div>
                  <span>最后支付金额 </span>
                  <span>{{ item.payPrice }}</span>
                </div>
                <div>
                  <span>支付类型 </span>
                  <span>{{ publicFun.paySubType(item.paySubType) }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="footer">
            <Button type="primary" size="small" v-print="'#print' + index"
              >打印</Button
            >
            <Button
              type="primary"
              size="small"
              @click="setOrderStatus(item, 3)"
              v-if="item.status == 2"
              >接单</Button
            >
            <Button
              type="primary"
              size="small"
              @click="cancleOrder(item)"
              v-if="item.status != 10"
              >取消</Button
            >
            <Button
              type="primary"
              size="small"
              v-if="item.status == 3"
              @click="setOrderStatus(item, 4)"
              >待领取</Button
            >
            <Button type="primary" size="small" v-if="item.status == 4"
              >已领取</Button
            >
          </div>
        </Card>
      </div>
    </div>
    <Row type="flex" justify="end" class="page">
      <Page
        :current="searchForm.pageNumber"
        :total="total"
        :page-size="searchForm.pageSize"
        @on-change="changePage"
        @on-page-size-change="changePageSize"
        :page-size-opts="[10, 20, 50]"
        size="small"
        show-total
        show-elevator
        show-sizer
      ></Page>
    </Row>
  </div>
</template>

<script>
import {
  scOrderGetOrderManage,
  scProductFindVipCard,
  orderUpdateOrderStatus,
  scOrderManageCancel,
} from "@/api/index";
export default {
  name: "",
  data() {
    return {
      cancleremark: "", //
      loading: false,
      searchForm: {
        pageSize: 10,
        pageNumber: 1,
        companyId: localStorage.getItem("companyId"),
      },
      companyId: localStorage.getItem("companyId"),
      orderlist: [],
      statistic: {},
      total: 0,
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      columns1: [
        {
          title: "商品名称",
          key: "productName",
        },
        {
          title: "商品数量",
          key: "cartNum",
        },
      ],
      columns2: [
        {
          title: "商品名称",
          key: "productName",
          fixed: "left",
          width: 100,
        },
        {
          title: "激活码",
          key: "verifyCode",
        },
        {
          title: "激活人手机",
          key: "mobile",
          width: "150",
        },
        {
          title: "激活时间",
          key: "createTime",
          align: "center",
        },
      ],
    };
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    setOrderStatus(item, status) {
      if (status == 3) {
        //接单
        this.$Modal.confirm({
          title: "操作",
          content: "确认接单吗？",
          onOk: () => {
            orderUpdateOrderStatus({ orderId: item.id, status: 3 }).then(
              (res) => {
                if (res.code == 200) {
                  this.$Message.success("已接单");
                  this.$Modal.remove();
                  this.getDataList();
                }
              }
            );
          },
          onCancel: () => {},
        });
      } else if (status == 4) {
        this.$Modal.confirm({
          title: "操作",
          content: "确认已取餐吗？",
          onOk: () => {
            orderUpdateOrderStatus({ orderId: item.id, status: 4 }).then(
              (res) => {
                if (res.code == 200) {
                  this.$Message.success("已接单");
                  this.$Modal.remove();
                  this.getDataList();
                }
              }
            );
          },
          onCancel: () => {},
        });
      }
    },
    cancleOrder(item) {
      this.cancleremark = "";
      this.$Modal.confirm({
        title: "取消订单",
        render: (h) => {
          return h("Input", {
            props: {
              value: this.cancleremark,
              autofocus: true,
              placeholder: "请输入取消订单的备注",
            },
            on: {
              input: (val) => {
                this.cancleremark = val;
              },
            },
          });
        },
        onOk: () => {
          scOrderManageCancel({
            orderId: item.id,
            remark: this.cancleremark,
          }).then((res) => {
            if (res.code == 200) {
              this.$Message.success("已取消");
              this.$Modal.remove();
              this.getDataList();
            }
          });
        },
      });
      return;
      this.$Modal.confirm({
        title: "确认要取消订单",
        content: "确认要取消订单吗？",
        onOk: () => {
          scOrderManageCancel({ orderId: item.id, status: 10 }).then((res) => {
            if (res.code == 200) {
              this.$Message.success("已取消");
              this.$Modal.remove();
              this.getDataList();
            }
          });
        },
        onCancel: () => {},
      });
    },
    getDataList() {
      this.loading = true;
      scOrderGetOrderManage(this.searchForm).then((res) => {
        this.loading = false;
        if (res.success) {
          this.statistic = res.result.statistic;
          this.orderlist = res.result.page.content;
          this.total = res.result.page.totalElements;
          if (this.orderlist.length == 0 && this.searchForm.pageNumber > 1) {
            this.searchForm.pageNumber -= 1;
            this.getDataList();
          }
        }
      });
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getDataList();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getDataList();
    },
    selectDateRange(v) {
      if (v) {
        this.searchForm.startDate = v[0];
        this.searchForm.endDate = v[1];
      }
    },
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getDataList();
    },
  },
};
</script>

<style scoped lang="less">
 .righttable {
    div {
      display: flex;
      justify-content: space-between;
      border-left: 1px solid #e3e3e3;
      border-top: 1px solid #e3e3e3;
      span {
        padding: 5px;
        border-right: 1px solid #e3e3e3;
        flex: 1;
        border-bottom: 1px solid #e3e3e3;
      }
    }
  }
.ordercard {
 
  .footer {
    text-align: right;
    margin-top: 8px;
    button {
      margin-left: 5px;
    }
  }
}
</style>